<template>
  <div class="right-top public-box">
    <p class="public-tit">在苏人数汇总</p>
    <!-- 在苏人数汇总 -->
    <div id="barChart" class="statistical-chart" style="width: 100%;height: calc(100% - 80px)"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { stt } from '@/models/screen'

export default {
  name: 'RightTop',
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await stt.getScreenStatisticsPersonnelArea()
      this.setChart(data)
    },
    setChart(detData) {
      const cityArry = []
      detData.forEach(item => {
        cityArry.push(item.areaName)
      })
      const totalArry = []
      detData.forEach(item => {
        totalArry.push(item.totalCount)
      })
      const perArry = []
      detData.forEach(item => {
        perArry.push(item.personnelCount)
      })
      const realArry = []
      detData.forEach(item => {
        realArry.push(item.relationCount)
      })

      const setBar = echarts.init(document.getElementById('barChart'))
      setBar.setOption({

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['区域分布', '常住台胞人数', '常驻台属人数'],
          type: 'scroll',
          icon: 'roundRect',
          right: 10,
          top: 12,
          textStyle: {
            color: 'rgba(255, 255, 255, .8)',
            fontSize: 28
          },
          itemWidth: 31,
          itemHeight: 15,
          itemGap: 40,
          padding: [0, 10]

          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: cityArry,
          axisLine: {
            lineStyle: {
              color: 'rgba(145, 182, 255, .5)'
            }
          },
          axisLabel: {
            interval: 0,
            // rotate: 40,
            textStyle: {
              fontSize: 28
            }
          },
          // 刻度
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dash',
              color: 'rgba(145, 182, 255, .5)'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255, 255, 255, .33)',
              fontSize: 28
            }
          }
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 0,
            end: 60,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '区域分布',
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#77D1FF'
                  },
                  {
                    offset: 1,
                    color: '#0C85FF'
                  }
                ]),
                barBorderRadius: [12, 12, 0, 0]
              }
            },
            data: totalArry
          },
          {
            name: '常住台胞人数',
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FFC477'
                  },
                  {
                    offset: 1,
                    color: '#F8953C'
                  }
                ]),
                barBorderRadius: [12, 12, 0, 0]
              }
            },
            data: perArry
          },
          {
            name: '常驻台属人数',
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#A2FFD9'
                  },
                  {
                    offset: 1,
                    color: '#3A9B77'
                  }
                ]),
                barBorderRadius: [12, 12, 0, 0]
              }
            },
            data: realArry
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.statistical-chart {
  margin-top: 20px;
}

.right-top {
  width: 1076px;
  height: 553px;
  padding-right: 40px;
  box-sizing: border-box;
  background: url("../../../assets/images/index/right_top.png") no-repeat;
}
</style>
